<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>欢迎光临-小窝</title>
	</head>
	<style type="text/css">
				* {
				  box-sizing: border-box;
				  background-color: pink;
				}
				
				body {
				  margin: 0;
				}

		
		
		
		/* 设置页眉的样式 */
		.header {
		  text-align: center;
		}
		
		/* 设置顶部导航栏的样式 */
		.topnav {
		  overflow: hidden;
		}
		
		/* 设置 topnav 链接的样式 */
		.topnav a {
		  float: left;
		  display: block;
		  color: #c294c8;
		  text-align: center;
		  padding: 14px 16px;
		  text-decoration: none;
		}
		
		/* 改变鼠标悬停时的颜色 */
		.topnav a:hover {
		  background-color: #ffa9c0;
		  color: black;
		  ul,li{
		      margin:0;
		      padding:0;
		      list-style: none;
		  }
		  
		  ul{
		      overflow: hidden;
		  }
		  li{
		      width: 100px;
		      height: 40px;
		      background-color: #eee;
		      border: 1px solid #ccc;
		      float: left;
		      line-height: 40px;
		      text-align: center;
		  }
		  
		  div{
		      width: 1000px;
		      height: 406px;
		      border: 1px solid #ccc;
		  }
		  img{
		      width: 1000px;
		      height: 406px;
		      display: none;
		  }
		}
	</style>
	<body>
		<div class="header">
		  <h1>欢迎光临-小窝</h1>
		</div>
		
		<div class="topnav">
		  <a href="suiji.html">随机奖励</a>
		  <a href="https://knightzzzzz.gitee.io/feiji">开黑频道</a>
		  <a href="flight.html">飞机大作战</a>
		</div>
		
		<div>
		    <img src="yuanshen1.jpg" alt="" style="display: block;">
		    <img src="yuanshen2.jpg" alt="">
		    <img src="yuanshen3.jpg" alt="">
		    <img src="yuanshen4.jpg" alt="">
		</div>
		<script>
		    // 逻辑：1.移动到哪个选项卡上，自己的背景颜色要改变  2.对应的内容区域要显示
		    // 同理，移出时，背景颜色恢复，对应内容区域隐藏
		
		    let li = document.getElementsByTagName('li');
		    let img = document.getElementsByTagName('img');
		
		    for(let i = 0;i<li.length;i++){
		        // 先进行元素数组 下标的设置
		        li[i].index = i;
		
		        li[i].onmouseover = function(){
		            this.style.backgroundColor = 'yellow';
		            // console.log(this.index);
		            // 先把所有的图片都隐藏，再让对应的图片出现
		            for(let j=0;j<img.length;j++){
		                img[j].style.display = 'none';
		            }
		            img[this.index].style.display = 'block';
		        }
		
		        li[i].onmouseout = function(){
		            li[i].style.backgroundColor = '#eee';
		        }
		    }
		
		
		</script>
	</body>
</html>
